<script lang="ts" setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import router from "@/router/index";
import LContainer from "@/components/layout/LContainer.vue";
import SettingsBase from "./components/SettingsBase.vue";
import SettingsSafe from "./components/SettingsSafe.vue";
import SettingsBinding from "./components/SettingsBinding.vue";
import SettingsNotice from "./components/SettingsNotice.vue";
import SettingLogoff from "./components/SettingLogoff.vue";

const route = useRoute();

const activeName = ref(route.query.name || "base");

const handleClick = (tab: any) => {
  router.push({
    path: route.path,
    query: {
      name: tab.props.name,
    },
  });
};
</script>

<template>
  <LContainer :scroll="false">
    <el-tabs v-model="activeName" tab-position="left" class="h-full bg-white user-setting" @tab-click="handleClick">
      <el-tab-pane label="基本设置" name="base">
        <div class="settings-box p-4">
          <div class="settings-box-title">基本设置</div>
          <div class="settings-box-container">
            <SettingsBase />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="安全设置" name="safe">
        <div class="settings-box p-4">
          <div class="settings-box-title">安全设置</div>
          <div class="settings-box-container">
            <SettingsSafe />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="账号绑定" name="binding">
        <div class="settings-box p-4">
          <div class="settings-box-title">账号绑定</div>
          <div class="settings-box-container">
            <SettingsBinding />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="消息通知" name="notice">
        <div class="settings-box p-4">
          <div class="settings-box-title">消息通知</div>
          <div class="settings-box-container">
            <SettingsNotice />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="注销账号" name="logoff">
        <div class="settings-box p-4">
          <div class="settings-box-title">注销账号</div>
          <div class="settings-box-container">
            <SettingLogoff />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </LContainer>
</template>

<style lang="less" scoped>
/*重写tab样式*/
:deep(.user-setting) {
  .el-tabs__item {
    &.is-active {
      background-color: var(--el-color-primary-light-8);
    }
  }
}

.settings-box {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  height: 100%;

  &-title {
    margin-bottom: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
  }

  &-container {
    display: flex;
    padding-top: 12px;
  }
}
</style>
